<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户设置</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet"/>
<link type="text/css" href="css/commonStyle.css" rel="stylesheet"/>
<style type="text/css" class="init">
#example th.delete_line{border: solid 0px white;} 
#example td.add_line{border-bottom: solid 1px black;}
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
	//控制表格下边线
    $('#example tfoot').find('th').addClass('delete_line');
    //$('#example tr:last').find('td').addClass('add_line');
	//在表格加入下拉框筛选
    $('#example').DataTable( {
        initComplete: function () {
            var api = this.api();
 
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
					var newD=d;
					if(newD.length>8){
						newD=newD.substring(0,8)+"..."
					}
                    select.append( '<option value="'+d+'">'+newD+'</option>' )
                } );

            } );
        }
    } );
    $(document).ready(function() {
    var table = $('#example').DataTable();
 //表格的行多选
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 //将选中行删除
    $('#Popups_in_btn1').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );
} );
</script>
</head>

<body>
<!--the outeset wrap starts-->
<h3 class="Page_title">用户设置</h3>
<div class="container" style="margin:0px; width:1060px;">
  <div class="row show-grid unified-border">
    <table id="example" class="display" cellspacing="0">
      <thead>
        <tr>
            <th>登陆邮箱</th>
            <th>姓名</th>
            <th>账户类型</th>
            <th>公司</th>
            <th>部门</th>
            <th>职务</th>
            <th>状态</th>
            <th>操作时间</th>
            <th>操作</th>
        </tr>
      </thead>
      
      <tfoot>
      	<tr>
            <th>登陆邮箱</th>
            <th style="visibility:hidden">姓名</th>
            <th>账户类型</th>
            <th>公司</th>
            <th>部门</th>
            <th>职务</th>
            <th>状态</th>
            <th>操作时间</th>
        </tr>
      </tfoot>

      <tbody>
        <tr>
              <td>12345@qq.com</td>
            <td><a href="javascript:void(0);">王五</a></td>
            <td>园区方</td>
            <td>微软</td>
            <td>abc</td>
            <td>assignment</td>
            <td>正常</td>
            <td>2014-11-11</td>
            <td> 
                <a href="APPNewUser.html" style="color:white;">
                    <button class="btn btn-primary" style="width: 82px;">编辑</button>
                </a>
            </td>
        </tr>
        <tr>
           <td>12345@qq.com</td>
            <td><a href="javascript:void(0);">赵四</a></td>
            <td>APP运营方</td>
            <td>微软</td>
            <td>abc</td>
            <td>assignment</td>
            <td>禁用</td>
            <td>2014-11-11</td>
            <td> 
                <a href="APPNewUser.html" style="color:white;">
                    <button class="btn btn-primary" style="width: 82px;">编辑</button>
                </a>
            </td>
        </tr>
        <tr>
           <td>12345@qq.com</td>
            <td><a href="javascript:void(0);">王五</a></td>
            <td>园区方</td>
            <td>微软</td>
            <td>abc</td>
            <td>assignment</td>
            <td>正常</td>
            <td>2014-11-11</td>
           <td> 
                <a href="APPNewUser.html" style="color:white;">
                    <button class="btn btn-primary" style="width: 82px;">编辑</button>
                </a>
           </td>
        </tr>
        <tr>
         <td>12345@qq.com</td>
            <td><a href="javascript:void(0);">王五</a></td>
            <td>园区方</td>
            <td>微软</td>
            <td>abc</td>
            <td>assignment</td>
            <td>正常</td>
            <td>2014-11-11</td>
             <td> 
                <a href="APPNewUser.html" style="color:white;">
                    <button class="btn btn-primary" style="width: 82px;">编辑</button>
                </a>
           </td>
        </tr>
        <tr>
           <td>12345@qq.com</td>
            <td><a href="javascript:void(0);">赵四</a></td>
            <td>APP运营方</td>
            <td>微软</td>
            <td>abc</td>
            <td>assignment</td>
            <td>禁用</td>
            <td>2014-11-11</td>
             <td> 
                <a href="APPNewUser.html" style="color:white;">
                    <button class="btn btn-primary" style="width: 82px;">编辑</button>
                </a>
           </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row show-grid">
      <a href="APPNewUser.html" style="color:white;">
      	<button class="btn btn-primary col-md-1 btn-style-new" style="margin-left:350px; width: 100px;">新建</button>
      </a>
      <button class="btn btn-primary col-md-1 btn-style-new" style="margin-left: 150px; width: 100px;">禁用</button>
    <!--  	<table border="1">
      <tr>
        <td>
        	<button class="btn btn-primary col-md-4"></button>
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
</table>--> 
    
  </div>
  <!--top part ends-->
 
</div>
<!--the outeset wrap ends-->
</body>
</html>
